<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://localhost:9000/public/js/lib/d3.min.js" ></script>
        <title>tree</title>
        <style>
            .svg{
                box-shadow:0 0 10px rgba(0,0,0,.2) ;
                margin:20px auto ;
                display:block;
            }
            .circle{
                fill:#ccc;
                stroke:#000;
            }
            .line{
                fill : none ;
                stroke : #000 ;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" >
            (function(win){

                var width = 1000 ;
                var height = 500 ;
                var margin = 10 ;
                var data = {
                    "name" : 'parent' ,
                    'children' : [
                        { 'name' : 'child1' } ,
                        { 'name' : 'child2' } ,
                        { 'name' : 'child3' , children:[
                            { name : 'child3' }
                        ] } ,
                        { 'name' : 'child4' , children : [
                            { name : 'child' }
                        ] }
                    ]
                } ;
                var svg = d3.select('body').append('svg').attr({
                    'width' : width + 2*margin ,
                    'height' : height + 2*margin ,
                    'class' : 'svg'
                }).append('g').attr({
                    'transform' : 'translate(' + margin +  ',' + margin + ')'
                }) ;
                var diagonal = d3.svg.diagonal().projection(function(d){ return [d.x, d.y] }) ;
                var tree = d3.layout.tree().size([width,height]) ;
                var nodes = tree.nodes(data) ;
                var lines = tree.links(nodes) ;
                var linkPath = svg.selectAll('path').data(lines).enter().append('path').attr({
                    'class' : 'line' ,
                    d : diagonal
                }) ;
                var circles = svg.selectAll('circle').data(nodes).enter().append('circle').attr({
                    'cx' : function( d ){ return d.x  ; } ,
                    'cy' : function( d ){ return d.y  ; } ,
                    'r' : 10 ,
                    'class' : 'circle'
                })  ;
                var text = svg.selectAll('text').data(nodes).enter().append('text').attr({
                    'x' : function(d){ return d.x + 10 ; } ,
                    'y' : function(d){ return d.y ; }
                }).text(function(d){
                    return d.name;
                }) ;
            }(window)) ;
        </script>
    </body>
</html>